import TinyReact from './TinyReact/index.js';


// react.createElement()
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    {/*<Heart></Heart>*/}
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13"/>
  </div>
)

console.log(virtualDOM)

function Demo() {
  return <div>hello</div>
}

// TinyReact.render(virtualDOM, document.getElementById('root'));
function Heart(props) {
  return <div>
    <h1>{props.title}</h1>
    <Demo/>
  </div>;
}

class Alert extends TinyReact.Component {
  render() {
    return <div>
      hello react;
      <h1>{this.props.name}</h1>
      <h2>{this.props.age}</h2>
      <h1>黑马程序员</h1>
    </div>
  }
}

console.log(<Heart name="李四" age={18}/>)

TinyReact.render(<Heart name="李四" age={18}/>, document.getElementById('root'));

// TinyReact.render(<Heart title="hello React"/>, document.getElementById('root'));
